<template>
  <div class="third">
    <div class="flex align-center justify-center">
      <div class="item-title flex align-center justify-center">
        规上企业展示
      </div>
    </div>
    <div class="px-2">
      <div class="text-main font18 mt-2 mb-1 text-left">销售占比</div>
      <div class="flex align-center justify-between proBox" style="color: #12D8A5" >
        <Progress
         :radius="getRealPX(38)"
          strokeColor="#12D8A5"
              :strokeWidth="getRealPX(6)"
          :value="dataInfo.gsCompanyXsPercentage<0?'0':dataInfo.gsCompanyXsPercentage"
        ></Progress>
        <div>
          <div class="text-left mb-3 pointer" @click="clickGsList">
            <p class="colorfff font12 mb-1">规上企业</p>
            <div style="color: #ef8f34" class="font24">
              {{ dataInfo.gsCompanyNumber }}
              <span class="font16">
                户 （占{{ dataInfo.gsCompanyPercentage }}%）
              </span>
            </div>
          </div>
          <div class="text-left pointer" @click="clickGsList">
            <p class="colorfff font12 mb-1">规上企业开票</p>
            <div style="color: #f84057" class="font24">
              {{ dataInfo.gsCompanyYxpz }}
              <span class="font16">
                张 （占{{ dataInfo.gsCompanyYxpzPercentage }}%）
              </span>
            </div>
          </div>
        </div>
        <div>
          <div class="text-left mb-3 pointer" @click="clickGsList">
            <p class="colorfff font12 mb-1">规上企业销售</p>
            <div style="color: #3ad7ab" class="font24">
              {{ dataInfo.gsCompanyDun }}
              <span class="font16">
                万吨 （占{{ dataInfo.gsCompanyXsPercentage }}%）
              </span>
            </div>
          </div>
          <div class="text-left pointer" @click="clickGsList">
            <p class="colorfff font12 mb-1">规上企业纳税</p>
            <div style="color: #0aabef" class="font24">
              {{ dataInfo.gsCompanyNsYuan }}
              <span class="font16">
                万元 （占{{ dataInfo.gsCompanyNsPercentage }}%）
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="text-main font18 mt-2 mb-1 text-left">销售结构</div>
      <div class="flex align-center justify-between mb-2">
        <div class="item" v-if="dataInfo.gsCompnayXsThree[0]">
          <div
            class="flex align-center justify-between probox"
            style="color: #fba731"
          >
            <div class="text-left">
              <div class="colorfff font12 mb-1">第一销售</div>
              <div
                class="pt-1 font12"
                style="color: #fba731; border-top: 1px solid #fba731"
              >
                {{ dataInfo.gsCompnayXsThree[0].name }}
                {{ dataInfo.gsCompnayXsThree[0].value }}万吨
              </div>
            </div>
            <Progress
             :radius="getRealPX(38)"
              strokeColor="#FBA731"
              :strokeWidth="getRealPX(4)"
              :value="dataInfo.gsCompnayXsThree[0].percentage"
            ></Progress>
          </div>
        </div>
        <div class="item" v-if="dataInfo.gsCompnayXsThree[1]">
          <div
            class="flex align-center justify-between probox"
            style="color: #f66881"
          >
            <div class="text-left">
              <div class="colorfff font12 mb-1">第二销售</div>
              <div
                class="pt-1 font12" 
                style="color: #f66881; border-top: 1px solid #f66881"
              >
                {{ dataInfo.gsCompnayXsThree[1].name }}
                {{ dataInfo.gsCompnayXsThree[1].value }}万吨
              </div>
            </div>
            <Progress
             :radius="getRealPX(38)"
              strokeColor="#F66881"
              :strokeWidth="getRealPX(4)"
              :value="dataInfo.gsCompnayXsThree[1].percentage"
            ></Progress>
          </div>
        </div>
        <div class="item" v-if="dataInfo.gsCompnayXsThree[2]">
          <div
            class="flex align-center justify-between probox"
            style="color: #6265ff"
          >
            <div class="text-left">
              <div class="colorfff font12 mb-1">第三销售</div>
              <div
                class="pt-1 font12" 
                style="color: #6265ff; border-top: 1px solid #6265ff"
              >
                {{ dataInfo.gsCompnayXsThree[2].name }}
                {{ dataInfo.gsCompnayXsThree[2].value }}万吨
              </div>
            </div>
            <Progress
             :radius="getRealPX(38)"
              strokeColor="#6265FF"
              :strokeWidth="getRealPX(4)"
              :value="dataInfo.gsCompnayXsThree[2].percentage"
            ></Progress>
          </div>
        </div>
      </div>
      <!-- <div class="font14 text-left" style="color: #b6e3f9">
        规上企业纳税
        <span style="color: #44caff"> {{ dataInfo.gsCompanyNsYuan }} </span>万元
      </div> -->
      <div
        class="font12 mt-2 text-left mb-2"
        style="color: #b6e3f9; line-height: 2"
      >
        纳税最多的企业依次是
        <span style="color: #44caff"
          >{{ dataInfo.gjCompanyNsOne }}，{{ dataInfo.gjCompanyNsTwo }}，{{
            dataInfo.gjCompanyNsThree
          }}</span
        >
        较去年同期增长
        <span style="color: #44caff">34.34</span>
        万元，
        <span style="color: #44caff">12%</span>
        。
      </div>
      <div>
        <ElTab
          :tableheight="tableheight"
          :headerData="headerData"
          :bodyData="dataList"
          :clickItem="clickItem"
        ></ElTab>
      </div>
    </div>
  </div>
</template>
<script>
import Progress from "easy-circular-progress";
import ElTab from "@/components/el_table";
import saleApi from "@/api/sale/index";

export default {
  name: "saleThird",
  components: { Progress, ElTab },
  data() {
    return {
      tableheight: 400,
      dataInfo: {},
      dataList: [],
      headerData: [
        { title: "序号", width: 50, props: "id" },
        { title: "企业名称", width: "", props: "vcCompanyName" },
        { title: "企业类型", width: 96, props: "vcCompanyType" },
        { title: "销售额（万元）", width: 96, props: "intDecNumPrice" },
        { title: "运输量（吨）", width: 110, props: "gjHwYsl" },
        { title: "纳税（万元）", width: 96, props: "nsPrice" },
      ],
    };
  },
  mounted() {
    this.getdataInfo();
    this.getdataList();
  },
  methods: {
    clickGsList(){
      this.$router.push({ path: "/companygslist" });
    },
    clickItem(item, index) {
      this.$router.push({ path: "/company",query:{longCompanyId:item.vcCompanyName} });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "data-row";
      } else {
        return "dataone-row";
      }
    },
    getdataInfo() {
      let that = this;
      saleApi
        .dataThird({})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.dataInfo = res;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getdataList() {
      let that = this;
      saleApi
        .dataFour({pageIndex:1,pageSize:10})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.dataList = res.records;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>
<style lang="stylus" scoped>
/deep/.el-table th {
  color: #ffffff; /* 字体颜色 */
  font-size: 16px;
  background-color: transparent; /* 背景透明 */
  // border: 0;
  // height: 30px;
  // line-height: 30px;
}

/deep/.el-table tr, .el-table td {
  color: #e5dada;
  font-size: 12px;
  background-color: transparent; /* 背景透明 */
  // border: 0;
  // height: 30px;
  // line-height: 30px;
}

/, /deep/.el-table tr.data-row {
  background: rgba(0, 204, 255, 0.2);
}

/deep/.el-table tr.dataone-row {
  // background: block;
}

/deep/.el-table td, .el-table th.is-leaf, .el-table--border, .el-table--group {
  color: rgba(0, 204, 255, 1);
  font-size: 12px;
  font-weight: 400;
}

// 去掉表格单元格边框
/deep/.customer-table th {
  border: 1px solid rgba(0, 86, 251, 0.2);
}

/deep/.customer-table td, .customer-table th.is-leaf {
  border: 1px solid rgba(0, 86, 251, 0.2);
  border-top: 0;
}

// 表格最外边框
/deep/.el-table--border, .el-table--group {
  border: 1px solid rgba(0, 86, 251, 0.2);
}

// 头部边框
/deep/.customer-table thead tr th.is-leaf {
  border: 1px solid rgba(0, 86, 251, 0.2);
  border-right: none;
}

/deep/.customer-table thead tr th:nth-last-of-type(2) {
  border-right: 1px solid rgba(0, 86, 251, 0.2);
}

// 表格最外层边框-底部边框
/deep/.el-table--border::after, .el-table--group::after {
  width: 0;
}

/deep/.customer-table::before {
  width: 0;
}

/deep/.customer-table .el-table__fixed-right::before, .el-table__fixed::before {
  width: 0;
}

// 表格有滚动时表格头边框
/deep/.el-table--border th.gutter:last-of-type {
  border: 1px solid rgba(0, 86, 251, 0.2);
  border-left: none;
}

.text-main {
  color: #66D6FF;
  font-weight: 400;
}

.third {
  width: 613px;
  height: 975px;
  background: url('../../../assets/img/sale/bg03.png') no-repeat;
  background-size: 613px 975px;

  .item-title {
    width: 264px;
    height: 40px;
    background: url('../../../assets/img/item-title.png');
    background-size: 264px 40px;
    margin-top: 6px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #DEF1FF;
  }
}

/deep/.vue-circular-progress .percent__int{
  font-size:20px ;
}
/deep/.vue-circular-progress .dot{
  font-size:10px ;
}
/deep/.vue-circular-progress .percent__dec {
  font-size:10px ;
}
/deep/.vue-circular-progress .percent_sign {
  font-size:10px ;
}
</style>
